<template>
	<view>
		<view class="search" @tap='openSearch'><input type="text" value="" placeholder="搜索" disabled /></view>
		<u-popup v-model="show" class="u-popup" mode="bottom" height="85%" duration="400">
			<view class="popup-content">
				<view class="content-search">
					<input type="text" value="" :placeholder="placeholder" v-model="search" :auto-focus="true" />
					<view class="btn" @tap="close">取消</view>
				</view>
				<view class="content" v-if="dataList.length > 0">
					<view class="">账号（昵称）</view>
					<view v-for="(item,index) in dataList" v-html="item.html" :key='index' class="item"
						@tap="userTap(item,index)"></view>
				</view>
				<u-empty text="没有找到~" mode="search"
					v-if="dataList.length == 0 && search.trim()!='' && loadingShow != true" style="margin-top: 300rpx;">
				</u-empty>
				<view class="" style="display: flex;justify-content: center;margin-top: 300rpx;">
					<u-loading mode="circle" size="80" :show="loadingShow"></u-loading>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingShow: false,
				search: "",
				show: false,
				type: '',
				placeholder: '',
				dataList: []

			};
		},
		watch: {
			search: function(val) {
				val == "" ? this.dataList = [] : ""
				this.$u.debounce(this.queryData, 500)

			}
		},
		methods: {
			userTap(item, index) {
				console.log(item, index)
				uni.navigateTo({
					url: `/pages/user_detail/user_detail?info=${JSON.stringify(item)}`,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			queryData() {
				console.log(this.search)
				// if (this.type == 'add_friend') {
				if (this.search.trim() != "") {
					this.loadingShow = true
					this.dataList = []
					this.$api.find_user({
						user: this.search
					}).then(res => {
						console.log(res)
						let replaceReg = new RegExp(this.search, 'g');
						let replaceString = '<text class="search-text">' + this.search + '</text>';
						//处理高亮结果
						res.data.forEach(ele => {
							let registerMail = ele.registerMail.replace(replaceReg, replaceString);
							let nickName = ele.nickName.replace(replaceReg, replaceString);
							ele.html = registerMail + `${nickName != ""?' ( ' + nickName + ' ) ':""}`
						})
						this.loadingShow = false
						console.log(res.data)
						this.dataList = res.data

					})
				}
				// }
			},
			//打开搜索页面
			openSearch(obj) {
				this.show = true
				this.type = obj.type
				this.placeholder = obj.placeholder
				this.search = ""
				this.dataList = []
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		background-color: #F4F4F5;
		padding: 15rpx 0;
		width: 92%;
		border-radius: 40rpx;
		margin: 20rpx auto;
		text-align: center;

	}

	.u-popup {

		.popup-content {
			width: 100%;
			background-color: #FFFFFF;

			// border: 10px solid red;
			.content-search {
				display: flex;

				input {
					background-color: #F4F4F5;
					height: 40rpx;
					padding: 15rpx 0;
					width: 600rpx;
					border-radius: 40rpx;
					margin: 20rpx;
					text-indent: 30rpx;
					font-size: 30rpx;
				}

				.btn {
					padding: 15rpx;
					height: 70rpx;
					// border: 1px solid;
					font-size: 30rpx;
					margin: 20rpx 0;
					color: #2B85E4;
				}
			}

			.content {
				margin: 35rpx;

				.item {
					padding: 30rpx 20rpx;
				}

				.item:not(:last-of-type) {
					border-bottom: 1px solid rgba(128, 128, 128, .4);
				}
			}

		}
	}
</style>
